<template>
    <scroller class="body">
        <div class="panel">
        	<Banner :imageList="banners"></Banner>
          <div class="big-more"></div>
       </div>

       <div class="guide" style="margin-top:10px;">
        <div class="horizontal">
          <div class="center" style="flex:1;margin:10;">
            <text class="font" style="margin-top:10px;">安全保障</text>
          </div>
          <div class="center" style="flex:1;flex-direction:column;margin:10;">
          
            <text class="font" style="margin-top:10px;">邀请好友</text>
          </div>
        </div>
      </div>
      <Footer></Footer>
    </scroller>
</template>
<script>
import Banner from '../components/banner/banner.vue'
import Footer from '../components/footer/footer.vue'
import { mapGetters } from 'vuex'

module.exports = {
  data: function(){
  	return {}
	},
	components: {
    'Banner': Banner,
    'Footer': Footer
  },
  computed: {
    ...mapGetters({
        banners: 'banners'
    })
  },
  created:function(){
    var self = this;
    this.$store.dispatch('getBanners')
  }
}
</script>
<style>
.horizontal{
  flex-direction:row;
}
.body {
  background-color: #ffffff;
  font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif
}
.panel{
  margin: 0px;
  padding:0px;
}
.center{
  align-items:center;
}
/*footer 底部栏*/
.footer{
  bottom: 0px;
  position: fixed;
  width: 750px;
}
.footer-item{
  flex:1;
  align-items:center;
  height: 120px;
  flex-direction:column;
  justify-content: center;
  align-items:center;
  border-width:1;
}

</style>